<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>添加房产信息</title>
    <meta name="renderer" content="webkit" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="format-detection" content="telephone=no" />
    <link rel="stylesheet" href="/css/main.css" media="all" />
    <script type="text/javascript" src="/lib/loading/okLoading.js"></script>
    <!-- 引入ElementUI样式 -->
    <link rel="stylesheet" href="/css/index.css" />
  </head>
  <body>
    <div id="app">
      <div class="x-nav">
        <span class="layui-breadcrumb">
          <a><cite>首页</cite></a>
          <a><cite>房产管理</cite></a>
          <a><cite>{{title}}</cite></a>
        </span>
        <a
          class="layui-btn layui-btn-small"
          style="line-height: 1.6em; margin-top: 3px; float: right"
          href="javascript:location.replace(location.href);"
          title="刷新"
          ><i class="layui-icon" style="line-height: 30px">ဂ</i></a
        >
      </div>
      <div class="x-body">
        <el-form
          :model="house"
          :rules="rules"
          ref="houseFormRef"
          label-width="120px"
          class="demo-ruleForm"
        >
          <el-form-item label="所属小区" prop="communityName">
            <el-input v-model="house.communityName"></el-input>
          </el-form-item>
          <el-form-item label="栋数名称" prop="buildingName">
            <el-input v-model="house.buildingName"></el-input>
          </el-form-item>
          <el-form-item label="房产编码" prop="code">
            <el-input v-model="house.code"></el-input>
          </el-form-item>
          <el-form-item label="房产名称" prop="name">
            <el-input v-model="house.name"></el-input>
          </el-form-item>
          <el-form-item label="户主名称" prop="ownerName">
            <el-input v-model="house.ownerName"></el-input>
          </el-form-item>
          <el-form-item label="联系方式" prop="telephone">
            <el-input v-model="house.telephone"></el-input>
          </el-form-item>
          <el-form-item label="房间数" prop="roomNum">
            <el-input v-model="house.roomNum"></el-input>
          </el-form-item>
          <el-form-item label="单元" prop="unit">
            <el-input v-model="house.unit"></el-input>
          </el-form-item>
          <el-form-item label="楼层" prop="floor">
            <el-input v-model="house.floor"></el-input>
          </el-form-item>
          <el-form-item label="描述" prop="description">
            <el-input v-model="house.description"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="save()" style="text-align: center">保存</el-button>
            <el-button @click="clearAll()" style="text-align: center">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <script src="lib/layui/layui.js" charset="utf-8"></script>
    <script src="js/x-layui.js" charset="utf-8"></script>
    <!--导入Vue依赖包-->
    <script src="/js/vue.js" charset="utf-8"></script>
    <!-- 引入Element组件库 -->
    <script src="/js/index.js"></script>
    <!--导入Axios依赖包-->
    <script src="/js/axios.js" charset="utf-8"></script>
    <script type="text/javascript">
      var app = new Vue({
        el: '#app',
        data: {
          title: '添加栋数',
          house: { id: '' },
          fileList: [],
          rules: {
            communityName: [{ required: true, message: '请输入所属小区名称', trigger: 'blur' }],
            buildingName: [{ required: true, message: '请输入所属栋数名称', trigger: 'blur' }],
            communityId: [{ required: true, message: '请输入栋数编号', trigger: 'blur' }],
            name: [{ required: true, message: '请输入栋数名称', trigger: 'blur' }],
            description: [{ required: true, message: '请输入栋数描述信息', trigger: 'blur' }],
            totalHouseholds: [{ required: true, message: '请输楼栋总户数', trigger: 'blur' }]
          }
        },
        methods: {
          findById() {
            axios.get('/house/findById?id=' + this.house.id).then(res => {
              this.house = res.data.data
            })
          },
          //表达重置
          clearAll() {
            this.$refs.houseFormRef.resetFields()
            if (this.fileList.length > 0) {
              this.handleRemove()
            }
          },
          save() {
            var method = ''
            if (this.house.id != null) {
              method = 'update'
              this.house.updateTime = new Date()
            } else {
              method = 'add'
              this.house.createTime = new Date()
            }
            axios.post('/house/' + method, this.house).then(res => {
              if (res.data.flag) {
                this.$message({
                  message: res.data.message,
                  type: 'success'
                })
              }
            })
          },
          getQueryString(name) {
            let reg = `(^|&)${name}=([^&]*)(&|$)`
            let r = window.location.search.substr(1).match(reg)
            if (r != null) return unescape(r[2])
            return null
          }
        },
        created: function () {
          layui.use(['element', 'layer', 'form'], function () {
            $ = layui.jquery //jquery
            lement = layui.element() //面包导航
            layer = layui.layer //弹出层
            form = layui.form()
            okLoading.close($)
          })
          //获取父页面传递参数，小区ID
          this.house.id = this.getQueryString('id')
          //根据小区ID获取小区对象，进行数据回显
          if (this.house.id != null && this.house.id != '') {
            this.title = '修改楼栋'
            this.findById()
          }
        }
      })
    </script>
  </body>
</html>
